/*
 * @Author: moxunjingmu
 * @Date: 2025-03-09 18:34:23
 * @Description: 
 */
import React from 'react';
import { StyleSheet, Text, Pressable, PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
import { useTheme } from '@/hooks/useTheme';

interface CustomButtonProps extends PressableProps {
  title: string;
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  textStyle?: StyleProp<TextStyle>;
  containerStyle?: StyleProp<ViewStyle>;
}

export default function CustomButton({
  title,
  variant = 'primary',
  size = 'medium',
  textStyle,
  containerStyle,
  ...rest
}: CustomButtonProps) {
  const { colors } = useTheme();
  
  const getBackgroundColor = () => {
    switch (variant) {
      case 'primary':
        return colors.primary;
      case 'secondary':
        return 'rgba(99, 102, 241, 0.1)';
      case 'outline':
        return 'transparent';
      default:
        return colors.primary;
    }
  };
  
  const getTextColor = () => {
    switch (variant) {
      case 'primary':
        return '#ffffff';
      case 'secondary':
      case 'outline':
        return colors.primary;
      default:
        return '#ffffff';
    }
  };
  
  const getPadding = () => {
    switch (size) {
      case 'small':
        return { paddingVertical: 6, paddingHorizontal: 12 };
      case 'medium':
        return { paddingVertical: 10, paddingHorizontal: 16 };
      case 'large':
        return { paddingVertical: 14, paddingHorizontal: 20 };
      default:
        return { paddingVertical: 10, paddingHorizontal: 16 };
    }
  };
  
  const getBorderStyle = () => {
    return variant === 'outline' ? { borderWidth: 1, borderColor: colors.primary } : {};
  };
  
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        {
          backgroundColor: getBackgroundColor(),
          opacity: pressed ? 0.8 : 1,
          ...getPadding(),
          ...getBorderStyle(),
        },
        containerStyle,
      ]}
      {...rest}
    >
      <Text
        style={[
          styles.text,
          { color: getTextColor(), fontSize: size === 'small' ? 14 : size === 'large' ? 18 : 16 },
          textStyle,
        ]}
      >
        {title}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontWeight: '600',
  },
});